<template>
    <v-card>
        <v-toolbar class="elevation-0">
            <v-flex xs2>
                <span class="subheading">状态：</span>
                <v-btn-toggle mandatory v-model.lazy="status">
                    <v-btn :value="0" large>
                        全部
                    </v-btn>
                    <v-btn :value="true" large>
                        启用
                    </v-btn>
                    <v-btn :value="false" large>
                        禁用
                    </v-btn>
                </v-btn-toggle>
            </v-flex>
            <v-flex xs2>
                <v-text-field label="姓名关键字" class="mb-2" box @keyup.enter="refresh"
                              hide-details v-model="search" append-icon="search"
                              @click:append="refresh"
                ></v-text-field>
            </v-flex>
        </v-toolbar>
        <v-divider/>
        <v-data-table
                :headers="headers"
                :items="dataList"
                :pagination.sync="pagination"
                :total-items="total"
                :loading="loading"
                class="elevation-1"
        >
            <template slot="items" slot-scope="props">
                <td >{{ props.item.id }}</td>
                <td >{{ props.item.name }}</td>
                <td>{{props.item.username}}</td>
                <td>{{ props.item.email }}</td>
                <td>{{ props.item.phone }}</td>
                <td>{{ props.item.status }}</td>
                <td>{{ props.item.createtime | dateFormat}}</td>
                <td class="justify-center layout px-0">
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="editGoods(props.item)">
                            <i class="el-icon-edit"/>
                        </v-btn>
                        <span> 修改</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn icon slot="activator" @click="deleteGoods(props.item)">
                            <i class="el-icon-delete"/>
                        </v-btn>
                        <span> 删除</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="changeStatus(props.item.id, !props.item.status)">
                            <i class="el-icon-upload2" v-if="!props.item.status"></i>
                            <i class="el-icon-download" v-else></i>
                        </v-btn>
                        <span v-if="!props.item.status"> 启用</span>
                        <span v-else> 禁用</span>
                    </v-tooltip>
                </td>
            </template>
        </v-data-table>
    </v-card>
</template>

<script>
    export default {
        inject: ['reload'],
        name: "UserList",
        data: () => ({
            headers: [
                {
                    text: 'ID',
                    align: 'start',
                    value: 'id',
                },
                {text: '姓名', value: 'name'},
                {text: '用户名', value: 'username'},
                {text: '邮箱', value: 'email'},
                {text: '手机号', value: 'phone'},
                {text: '状态', value: 'status'},
                {text: '创建时间', value: 'createtime'},
                {text: '操作', align: 'center', sortable: false}
            ],
            dataList:[],
            pagination: {}, // 分页信息
            total:0,
            status:0,
            search: '', // 搜索过滤字段

        }),
        mounted() { // 渲染后执行
            // 查询数据
            this.getDataList();
        },
        watch: {
            pagination: { // 监视pagination属性的变化
                deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
                handler() {
                    // 变化后的回调函数，这里我们再次调用getDataFromServer即可
                    this.getDataList();
                }
            },
        },
        methods: {
            refresh() {
                if (this.pagination.page !== 1) {
                    this.pagination.page = 1;
                    return;
                }
                this.getDataFromServer();
            },
            getDataList(){
                this.$http.get("/users/listByPage", {
                    params:{
                        search: this.search ? this.search : null,
                        pagenum: this.pagination.page,
                        pagesize: this.pagination.rowsPerPage
                    }
                }).then(res =>{
                    if(res.data.code===200){
                        this.dataList = res.data.data.list
                        this.total = res.data.total
                    }
                }).catch()
            },
            changeStatus(id,status){
                this.$http.put("/users/changeStatus", this.$qs.stringify({id, status}))
                    .then(() => {
                            this.$message.success("操作成功！");
                            this.reload();
                            this.reload();
                    })
                    .catch(error => {
                        this.$message.error(error);
                    })
            }
        },
    }
</script>

<style scoped>

</style>
